<template>
  <div>
    <div class="bread" style="margin-bottom: 30px;">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '#' }" style="font-size: 20px;"
          >首页</el-breadcrumb-item
        >
        <el-breadcrumb-item style="font-size: 20px;"
          >图书管理</el-breadcrumb-item
        >
        <el-breadcrumb-item style="font-size: 20px;"
          >展示图书</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>

    <el-row style="margin-top: 20px;margin-left: 50px;">
      <el-col :span="2" :offset="0">
        <el-input placeholder="作者" v-model="searchCondition.bookAuth">
        </el-input>
      </el-col>
      <el-col :span="4" :offset="1">
        <el-input placeholder="出版社" v-model="searchCondition.bookPress">
        </el-input>
      </el-col>
      <el-col :span="4" :offset="1">
        <el-input placeholder="展示名" v-model="searchCondition.bookShowname">
        </el-input>
      </el-col>

      <el-col :span="2" :offset="1">
        <el-input placeholder="最低价格" v-model="searchCondition.minPrice">
        </el-input>
      </el-col>
      <el-col :span="2" :offset="1">
        <el-input placeholder="最高价格" v-model="searchCondition.maxPrice">
        </el-input>
      </el-col>
      <el-col :span="1" :offset="1">
        <el-button type="primary" @click="listBookInfoByCondition()" icon="el-icon-search"
          >搜索</el-button
        >
      </el-col>
    </el-row>

    <el-row style="margin-top: 30px;">
      <el-col style="margin-left:50px;" :span="2" :offset="0">
        <el-select
          @change="listBookInfo"
          v-model="searchCondition.bookState"
          clearable
          placeholder="图书状态"
        >
          <el-option
            v-for="item in options"
            :key="item.state"
            :label="item.label"
            :value="item.state"
          >
          </el-option>
        </el-select>
      </el-col>

      <el-col :span="4" :offset="1">
        <el-date-picker
          @change="listBookInfo"
          value-format="yyyy-MM-dd"
          v-model="searchCondition.startPressDate"
          placeholder="选择出版最早日期"
          type="date"
          style="width: 100%;"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-col>

      <el-col :span="4" :offset="1">
        <el-date-picker
          @change="listBookInfo"
          value-format="yyyy-MM-dd"
          v-model="searchCondition.endPressDate"
          placeholder="选择出版最晚日期"
          type="date"
          style="width: 100%;"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-col>

      <el-col :span="2" :offset="1">
        <el-cascader
          style="margin-left: -30px;"
          @change="searchBookInfoByBookType"
          v-model="searchCondition.typeId"
          placeholder="图书类别"
          :options="allBookTypes"
          :props="props"
          clearable
        ></el-cascader>
      </el-col>
    </el-row>

    <el-row style="margin-top: 20px;margin-left: 38px;">
      <el-col :span="2">
        <el-button
          @click="delBySelect"
          type="danger"
          icon="el-icon-delete-solid"
          round
          size="small"
          >批量删除</el-button
        >
      </el-col>
      <el-col :span="2" :offset="0">
        <el-button
          @click="undelBySelect"
          type="primary"
          icon="el-icon-refresh-left"
          round
          size="small"
          >批量撤回</el-button
        >
      </el-col>
      <el-col :span="2" :offset="1">
        <el-button
          @click="disableBySelect"
          type="warning"
          icon="el-icon-error"
          size="small"
          round
          >批量下架</el-button
        >
      </el-col>
      <el-col :span="2" :offset="0">
        <el-button
          @click="enableBySelect"
          type="success"
          icon="el-icon-success"
          size="small"
          round
          >批量上架</el-button
        >
      </el-col>
    </el-row>

    <div ref="table">
      <el-table
        :data="page.list"
        border
        @selection-change="handleSelectionChange"
        style="width: 1411px;margin-left: 50px;margin-top: 20px;"
        :stripe="true"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column
          fixed="left"
          prop="bookId"
          type="selection"
          label="图书id"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="bookImage"
          label="封面"
          width="150"
          align="center"
        >
          <template slot-scope="{ row }">
            <el-upload
              class="avatar-uploader"
              action=""
              :data="row"
              :http-request="updateBookImage"
              :show-file-list="false"
              :headers="headers"
            >
              <img
                v-if="row.bookImage"
                :src="row.bookImage"
                class="avatar"
                style="height: 70px;width: 100px;"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </template>
        </el-table-column>
        <el-table-column prop="bookShowname" label="显示名" width="180">
        </el-table-column>
        <el-table-column prop="bookAuth" label="作者" width="100">
        </el-table-column>
        <el-table-column prop="bookPrice" label="单价/元" width="100">
        </el-table-column>
        <el-table-column prop="typeName" label="图书类别" width="120">
        </el-table-column>
        <el-table-column prop="bookPress" label="出版社" width="150">
        </el-table-column>
        <el-table-column prop="pressDate" label="出版时间" width="100">
        </el-table-column>
        <el-table-column fixed="right" prop="number" label="库存量" width="100">
        </el-table-column>
        <el-table-column prop="bookName" label="书名" width="200">
        </el-table-column>
        <el-table-column fixed="right" label="图书状态" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.bookState == 0"
              >已上架<i style="color: limegreen;" class="el-icon-success"></i
            ></span>
            <span v-if="scope.row.bookState == 1"
              >已删除<i style="color: red;" class="el-icon-delete-solid"></i
            ></span>
            <span v-if="scope.row.bookState == 2"
              >已下架<i style="color:chocolate;" class="el-icon-error"></i
            ></span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="260">
          <template slot-scope="scope">
            <el-button
              type="primary"
              v-if="scope.row.bookState == 2"
              icon="el-icon-edit"
              @click="handleClick(scope.row)"
              size="small"
              circle
              >修改</el-button
            >
            <el-button
              v-if="scope.row.bookState == 0"
              @click="disable(scope.row.bookId)"
              type="warning"
              icon="el-icon-error"
              size="mini"
              round
              >下架</el-button
            >
            <el-button
              v-if="scope.row.bookState == 2"
              @click="enable(scope.row.bookId)"
              type="success"
              icon="el-icon-success"
              size="mini"
              round
              >上架</el-button
            >
            <el-button
              v-if="scope.row.bookState == 2"
              @click="delById(scope.row.bookId)"
              type="danger"
              icon="el-icon-delete-solid"
              round
              size="mini"
              >删除</el-button
            >
            <el-button
              v-if="scope.row.bookState == 1"
              @click="undelete(scope.row.bookId)"
              type="primary"
              icon="el-icon-refresh-left"
              round
              size="mini"
              >撤回</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-row style="margin-left: 50px;">
      <el-col :span="5">
        <el-pagination
          @size-change="pageSizeChange"
          @current-change="pageNumChange"
          :current-page="page.current"
          :page-sizes="[1, 4, 10]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </el-col>
    </el-row>

    <el-dialog :visible.sync="showUpdateWindow" width="30%">
      <template slot="title">
        <div style="font-size:18px;font-weight: 999;">修改图书信息</div>
      </template>
      <div style="width: 400px;">
        <el-form
          :model="bookInfo"
          :rules="rules"
          ref="bookInfo"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="显示名" prop="bookShowname">
            <el-input v-model="bookInfo.bookShowname"></el-input>
          </el-form-item>
          <el-form-item label="图书名" prop="bookName">
            <el-input v-model="bookInfo.bookName"></el-input>
          </el-form-item>
          <el-form-item label="作者" prop="bookAuth">
            <el-input v-model="bookInfo.bookAuth"></el-input>
          </el-form-item>
          <el-form-item label="出版社" prop="bookPress">
            <el-input v-model="bookInfo.bookPress"></el-input>
          </el-form-item>
          <el-form-item label="出版时间" prop="pressDate">
            <el-col :span="11">
              <el-date-picker
                value-format="yyyy-MM-dd"
                v-model="bookInfo.pressDate"
                placeholder="选择日期"
                type="date"
                style="width: 100%;"
                :picker-options="pickerOptions"
              ></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="单价" prop="bookPrice">
            <el-input v-model="bookInfo.bookPrice"></el-input>
          </el-form-item>
          <el-form-item label="库存量" prop="number">
            <el-input v-model="bookInfo.number"></el-input>
          </el-form-item>
          <el-form-item label="类别" prop="typeId">
            <el-select style="width: 300px;" v-model="bookInfo.typeId">
              <el-option
                v-for="item in selfBookTypes"
                :key="item.typeId"
                :label="item.typeName"
                :value="item.typeId"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-button type="primary" @click="submitForm('bookInfo')"
            >立即修改</el-button
          >
          <el-button @click="resetForm('bookInfo')">重置</el-button>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ShowBookInfo",
  data() {
    return {
      ids: "",
      searchCondition: {
        bookAuth: "",
        bookPress: "",
        bookShowname: "",
        minPrice: "",
        maxPrice: "",
        bookState: null,
        startPressDate: null,
        endPressDate: null,
        typeId: null,
        pageSize: null,
        pageNum: null
      },
      bookInfoForm:{

      },
      allBookTypes: [],
      props: {
        expandTrigger: "hover",
        checkStrictly: true,
        value: "typeId",
        label: "typeName",
        children: "children"
      },
      page: {},
      showUpdateWindow: false,
      bookInfo: {
        
      },
      options: [
        {
          state: "0",
          label: "已上架"
        },
        {
          state: "1",
          label: "已删除"
        },
        {
          state: "2",
          label: "已下架"
        }
      ],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
          //time.getTime() > Date.now(); 选择今天及今天之前的日期；
          //time.getTime() > Date.now() - 3600 * 1000 * 24;选择今天之前的日期，不包括今天；
          //time.getTime() < Date.now();选择今天之后的日期；
          //time.getTime() < Date.now() - 3600 * 1000 * 24;选择今天及今天之后的日期；
        }
      },
      headers: {
        token: localStorage.getItem("token")
      },
      rules: {
        bookShowname: [
          {
            required: true,
            message: "请输入显示名",
            trigger: "blur"
          }
        ],
        bookName: [
          {
            required: true,
            message: "书名",
            trigger: "blur"
          }
        ],
        bookAuth: [
          {
            required: true,
            message: "请输入作者名",
            trigger: "blur"
          }
        ],
        bookPress: [
          {
            required: true,
            message: "请输入出版社",
            trigger: "blur"
          }
        ],
        pressDate: [
          {
            required: true,
            message: "请选择出版日期",
            trigger: "change"
          }
        ],
        bookPrice: [
          {
            required: true,
            message: "请输入单价",
            trigger: "blur"
          }
        ],
        number: [
          {
            required: true,
            message: "请输入数量",
            trigger: "blur"
          }
        ],
        typeId: [
          {
            required: true,
            message: "请选择图书类别",
            trigger: "change"
          }
        ]
      },
      selfBookTypes: []
    };
  },
  methods: {
    submitForm(bookInfo) {
      this.$refs[bookInfo].validate(valid => {
        if (valid) {
          //修改操作
          this.$http
            .post("/bookInfo/admin/updateBookInfo", this.bookInfo)
            .then(resp => {
              alert(resp.data.message);
              this.showUpdateWindow = false;
              this.listBookInfo();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(bookInfo) {
      this.$refs[bookInfo].resetFields();
    },
    pageSizeChange(size) {
      this.page.current = 1;
      this.splitePage(this.page.current, size);
    },
    pageNumChange(current) {
      this.splitePage(current, this.page.size);
    },
    listBookInfo() {
      //查找全部
      //调用分页函数
      this.splitePage(this.page.current, this.page.size);
    },
    splitePage(pageNum, pageSize) {
      this.bookInfoForm=JSON.parse(JSON.stringify(this.searchCondition))
      //分页函数
      if (this.bookInfoForm.typeId != null) {
        let num = this.bookInfoForm.typeId.length;
        this.bookInfoForm.typeId = this.bookInfoForm.typeId[num - 1];
      }
      this.bookInfoForm.pageNum = pageNum;
      this.bookInfoForm.pageSize = pageSize;
      this.$http
        .post("/bookInfo/admin/searchBookInfos", this.bookInfoForm)
        .then(resp => {
          //将分页信息传入data区中
          this.page = resp.data.data;
        });
    },
    handleClick(obj) {
      this.bookInfo = JSON.parse(JSON.stringify(obj));
      this.showUpdateWindow = true;
    },
    listAllBookTypes() {
      this.$http.get("/bookType/admin/selectBookTypeTree").then(resp => {
        resp.data.data.splice(resp.data.data.length - 1, 1);
        this.allBookTypes = resp.data.data;
      });
    },
    listSelfBookTypes() {
      this.$http.get("/bookType/admin/selectAllSelf").then(resp => {
        this.selfBookTypes = resp.data.data;
      });
    },
    disable(id) {
      this.$http
        .get("/bookInfo/admin/disableBookInfo?bookId=" + id)
        .then(resp => {
          alert(resp.data.message);
          this.listBookInfo();
        });
    },
    enable(id) {
      this.$http
        .get("/bookInfo/admin/enableBookInfo?bookId=" + id)
        .then(resp => {
          alert(resp.data.message);
          this.listBookInfo();
        });
    },
    delById(id) {
      this.$http
        .get("/bookInfo/admin/deleteBookInfo?bookId=" + id)
        .then(resp => {
          alert(resp.data.message);
          this.listBookInfo();
        });
    },
    undelete(id) {
      this.$http
        .get("/bookInfo/admin/undeleteBookInfo?bookId=" + id)
        .then(resp => {
          alert(resp.data.message);
          this.listBookInfo();
        });
    },
    handleSelectionChange(val) {
      this.ids = "";
      for (var i = 0; i < val.length; i++) {
        this.ids += val[i].bookId + ",";
      }
      console.log(val);
    },
    updateBookImage(e) {
      //图片上传操作
      //e为upload对象，e.file为上传的文件对象
      let file = e.file;
      var formData = new FormData();
      //将文件信息存入表单数据对象中 传入后端
      formData.append("image", file);
      //data内 存放附带信息
      formData.append("bookId", e.data.bookId);
      this.$http
        .post("/bookInfo/admin/updateBookImage", formData, {
          //设置数据编码 表单数据对象专用
          "Content-Type": "multipart/form-data"
        })
        .then(resp => {
          alert(resp.data.message);
          this.listBookInfo();
        });
    },
    delBySelect() {
      if (this.ids != "") {
        this.$http
          .get("/bookInfo/admin/delBookInfoBySelect?ids=" + this.ids)
          .then(resp => {
            alert(resp.data.message);
            this.listBookInfo();
          });
      }
    },
    undelBySelect() {
      if (this.ids != "") {
        this.$http
          .get("/bookInfo/admin/undelBySelect?ids=" + this.ids)
          .then(resp => {
            alert(resp.data.message);
            this.listBookInfo();
          });
      }
    },
    disableBySelect() {
      if (this.ids != "") {
        this.$http
          .get("/bookInfo/admin/disableBySelect?ids=" + this.ids)
          .then(resp => {
            alert(resp.data.message);
            this.listBookInfo();
          });
      }
    },
    enableBySelect() {
      if (this.ids != "") {
        this.$http
          .get("/bookInfo/admin/enableBySelect?ids=" + this.ids)
          .then(resp => {
            alert(resp.data.message);
            this.listBookInfo();
          });
      }
    },
    searchBookInfoByBookType(){
      console.log(2);
      this.splitePage();
    },
    listBookInfoByCondition(){
      console.log(1);
      this.splitePage();
    }
  },
  created() {
    this.listBookInfo();
    this.listAllBookTypes();
    this.listSelfBookTypes();
  }
};
</script>

<style scoped>
.bread {
  margin-top: 50px;
  margin-left: 50px;
}
</style>
<style>
.el-input__inner::placeholder {
  color: #31e5f5;
}
</style>
